<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = '河南省某市场品类价格一览';
$this->params['breadcrumbs'][] = $this->title;

//var_dump($prices);die;
?>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入 ECharts 文件 -->
    <link rel="stylesheet" href="/weui/style/weui.css">
    <link rel="stylesheet" href="/weui/example/example.css">
</head>
<body ontouchstart>
<!--BEGIN toast-->
    <div id="toast_success" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载已完成</p>
        </div>
    </div>
    <div id="toast_error" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">没有该日期数据<br>请重新选择日期</p>
        </div>
    </div>
    <!--end toast-->
    <div class="container" id="container">
        <div class="page input js_show">
            <div class="page__hd">
                <h1 class="page__title"><?= $this->title ?></h1>
                <p class="page__desc">来自蚁卡营大数据中心</p>
            </div>

            <div class="weui-cells__title">选择市场和日期</div>
            <form id="myform" action="market-day-table" method="get">
                <div class="weui-cells">
                    <div class="weui-cell weui-cell_select weui-cell_select-after">
                        <div class="weui-cell__hd"><label for="" class="weui-label">市场</label></div>
                        <div class="weui-cell__bd">
                            <select class="weui-select" name="market" onchange="select_change()" >
                                <?php foreach ($markets as $mar) {
                                    if ($mar['market'] == $market) { ?>
                                        <option selected="selected" value =<?=$mar['market']?>><?=$mar['market']?></option>
                                    <?php } else { ?>
                                        <option value =<?=$mar['market']?>><?=$mar['market']?></option>
                                    <?  }} ?>
                            </select>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="date" name="date" value=<?=$date?> onchange="select_change()"/>
                        </div>
                    </div>
                </div>
            </form>

            <div class="weui-cells__title">品类价格一览表 (价格升序排列)</div>
            <div class="weui-cells">
                <?php foreach ($danpin as $dp) { ?>
                    <a class="weui-cell weui-cell_access" href="one-day-table?name=<?=$dp->name?>&date=<?=$_GET['date']?>">
                        <div class="weui-cell__bd">
                            <p><?= $dp->name ?></p>
                        </div>
                        <div class="weui-cell__ft"><?= $dp->price_jin ?>元/斤</div>
                    </a>
                <?php } ?>
            </div>

            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<!--            <div id="charts" style="width: 100%;height:80%;"></div>-->
        </div>
    </div>


    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--    <script src="/weui/example/zepto.min.js"></script>-->
    <!--    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
    <!--    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>-->
    <!--    <script src="/weui/example/example.js"></script>-->
</body>
<script type="text/javascript">

    window.onload = function () {
        <?php if (count($danpin)) { ?>
            var $toast = $('#toast_success');
            if ($toast.css('display') != 'none') return;
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 1000);
        <?php } else { ?>
            var $toast = $('#toast_error');
            if ($toast.css('display') != 'none') return;
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 1000);
        <?php } ?>
    }

    function select_change() {
        var form = document.getElementById('myform');
        form.submit();
    }

    // 基于准备好的dom，初始化echarts实例
    //var myChart = echarts.init(document.getElementById('charts'));

    // 指定图表的配置项和数据
    var option = {
            title: {
                text: '<?= $_GET['name'].'单品价格'?>',
                subtext: '数据来自蚁卡营大数据中心',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['价格(单位:元)']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: <?= json_encode($markets) ?>,
            },
            series: [
                {
                    name: '价格(单位:元)',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: <?= json_encode($prices) ?>
                },
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option,true);
    //window.onresize = myChart.resize;
</script>